<template>
	<div id="confirm">
		<div class="container">
			<span class="titleaddress">收货地址</span>
			<div> 
				<div v-for="item,index in addressList" :key="index" class="newAddress" @click="changeIndex=index"
				 :class="{changeColor:index==changeIndex}">
					<div class="username">{{item.receiverName}}</div>
					<div class="phoneNum">{{item.receiverMobile}}</div>
					<div class="address">{{item.receiverProvince}} {{item.receiverDestrict}} {{item.receiverAddress}}</div>
					<button @click="delAddress(item)">删除</button>
					<button @click="editAddress(item)">修改</button>
				</div>
				<div class="addAddress" @click="openAddressModal">
					<div>
						<i></i>
						<p>添加新地址</p>
					</div>
				</div>
			</div>
			<p class="goods">商品</p>
			<div v-for="item,index in addgoods" :key="index" class="goodsItem">
				<img :src="item.img" alt="">
				<div>{{item.name}}</div>
				<div>{{item.title}}</div>
				<div>{{item.price}}元X{{item.num}}</div>
				<div>{{item.totalPrice}}元</div>
			</div>
			<div class="send">
				<span>配送方式</span>
				<span>包邮</span>
			</div>
			<div class="ticket">
				<span>发票</span>
				<span>电子发票</span>
				<span>个人</span>
			</div>
			<div class="pay">
				<div>商品件数: <span>{{lastRes.totalCount}}件</span></div>
				<div>商品总价: <span>{{lastRes.lastPrice}}元</span></div>
				<div>优惠活动: <span>0</span></div>
				<div>运费: <span>0</span></div>
				<div>总额: <span class="last">{{lastRes.lastPrice}}元</span></div>
			<button @click="$router.push('/cart')">返回购物车</button>
			<button @click="orderSubmit">去结算</button>
			</div>
		</div>
		<modal title="删除确认" btnType="2" :showModal="showDelModal" @closeModal="showDelModal=false"
		 @submit="submitAddress">
		 <template v-slot:body>
			 <p>宁确认要删除吗</p>
		 </template>
		 </modal>
		 <modal title="新增地址" btnType="2" :showModal="showEditModal" @closeModal="showEditModal=false"
		  @submit="submitAddress">
		  <template v-slot:body>
		 	 <div class="edit-wrap">
				 <div class="item">
					 <input type="text" class="input" placeholder="姓名" v-model="checkItem.receiverName">
					 <input type="text" class="input" placeholder="手机号" v-model="checkItem.receiverMobile">
				 </div>
				 <div class="item">
					 <select name="provice" v-model="checkItem.receiverProvince">
						 <option value="北京">北京</option>
						 <option value="上海">上海</option>
						 <option value="武汉">武汉</option>
						 <option value="深圳">深圳</option>
					 </select>
					 <select name="city" v-model="checkItem.receiverCity">
					 						 <option value="北京">北京</option>
					 						 <option value="上海">上海</option>
					 						 <option value="武汉">武汉</option>
					 						 <option value="深圳">深圳</option>
					 </select>
					 <select name="district" v-model="checkItem.receiverDestrict">
					 						 <option value="江夏区">江夏区</option>
					 						 <option value="洪山区">洪山区</option>
					 						 <option value="汉口">汉口</option>
					 						 <option value="黄埔">黄埔</option>
					 </select>
				 </div>
				 <div class="item">
					 <textarea name="street" placeholder="街道" v-model="checkItem.receiverAddress"></textarea>
				 </div>
				 <div class="item">
					 <input type="text" placeholder="邮编" v-model="checkItem.receiverZip">
				 </div>
			 </div>
		  </template>
		  </modal>
	</div>
</template>

<script>
	import Modal from '../components/Modal.vue'
	import {Message} from 'element-ui'
	export default{
		components:{
			Modal,
		},
		data(){
			return{
				changeIndex:0,
				showDelModal:false,//是否显示删除弹框
				addressList:[],
				addgoods:[],
				lastRes:{totalCount:0,lastPrice:0 },
				checkItem:{},//选中的商品对象
				userAction:'',//用户行为 0新增 1编辑 2 删除
				showEditModal:false,//是否显示弹框
			}
		},
		created() {
			this.getCartList()
			this.getAddressList()
		},
		methods:{
			orderSubmit(){
				let item=this.addressList[this.changeIndex]
				if(!item){
					Message.error('请选择收货地址')
					return ;
				}
				this.axios.post('/orders',{
					shippingId:item.id
				}).then(res=>{
					this.$router.push({
						path:'/order/pay',
						query:{
							orderNo:res.orderNo
						}
					})
				})
			},
			//打开新增地址弹框
      openAddressModal(){
				this.showEditModal=true;
				this.userAction=0;
				this.checkItem={}
			},		
			delAddress(item){
				this.checkItem=item;
				this.userAction=2;
				this.showDelModal=true
			},
			editAddress(item){
				this.checkItem=item;
				this.userAction=1;
				this.showEditModal=true;
			},
			//地址删除 编辑 新增功能
			submitAddress(){
				let {checkItem,userAction}=this;
				let method,url,params={};
				if(userAction==0){
			    method='post',url='/shippings';
					let {receiverName,receiverMobile,receiverProvince,receiverDestrict,receiverAddress
					,receiverZip}=checkItem
					if(!receiverName){
						Message.error('请输入收货人名称')
						return ;
					}else if(!receiverMobile||!/\d{11}/.test(receiverMobile)){
						console.log(typeof checkItem.receiverMobile)
						Message.error('手机号格式不正确或为空')
						return ;
					}else if(!receiverProvince){
						Message.error('请输入省份')
						return ;
					}else if(!receiverDestrict){
						Message.error('请输入地区')
						return ;
					}else if(!receiverAddress){
						Message.error('请输入街区')
						return ;
					}else if(!receiverZip||!/\d{6}/.test(receiverZip)){
						Message.error('请输入邮编，或邮编格式不正确')
						return ;
					}
					
					params={
						receiverName,
						receiverMobile,
						receiverProvince,
						receiverDestrict,
						receiverAddress,
						receiverZip,
					}
					
				}else if(userAction==1){
					method='put',url=`/shippings/${checkItem.id}`;
					let {receiverName,receiverMobile,receiverProvince,receiverDestrict,receiverAddress
					,receiverZip}=checkItem
					if(!receiverName){
						Message.error('请输入收货人名称')
						return ;
	        }else if(!receiverMobile||!/\d{11}/.test(receiverMobile)){
						Message.error('手机号格式不正确或为空')
						return ;
					}else if(!receiverProvince){
						Message.error('请输入省份')
						return ;
					}else if(!receiverDestrict){
						Message.error('请输入地区')
						return ;
					}else if(!receiverAddress){
						Message.error('请输入街区')
						return ;
					}else if(!receiverZip||!/\d{6}/.test(receiverZip)){
						Message.error('请输入邮编，或邮编格式不正确')
						return ;
					}
					
					params={
						receiverName,
						receiverMobile,
						receiverProvince,
						receiverDestrict,
						receiverAddress,
						receiverZip,
					}
				}else if(userAction==2){
					method='delete',url=`/shippings/${checkItem.id}`;
				}
				if(userAction==0||userAction==1){
					this.axios[method](url,params).then(res=>{
						this.closeModal()
						this.getAddressList()
						Message.success('操作成功')
					})
				}
				if(userAction==2){
					this.axios[method](url).then(res=>{
						this.closeModal()
						this.getAddressList()
						Message.success('操作成功')
					})
				}
				
			},
			closeModal(){
				this.checkItem={}
				this.userAction=''
				this.showDelModal=false
				this.showEditModal=false
			},
			getAddressList(){
				this.axios.get('/shippings').then(res=>{
					this.addressList=res.list
					
				})

			},
			getCartList(){
			  this.axios.get('/carts').then((res)=>{
					console.log(res)
					res.cartProductVoList.forEach(item=>{
						this.addgoods.push({img:item.productMainImage,name:item.productName,
						title:item.productSubtitle,price:item.productPrice,num:item.quantity,
						totalPrice:item.productTotalPrice})
						this.lastRes.totalCount=item.quantity+this.lastRes.totalCount
					})
					this.lastRes.lastPrice=res.cartTotalPrice
			  })
			}
		}
	}
</script>

<style lang="less">
	@import './../assets/css/base.less';
	#confirm{
		.container{
			.titleaddress{
				font-size: 22px;
				display: block;
			}
			.newAddress{
				margin-top: 20px;
				display: inline-block;
				width: 300px;
				height: 200px;
				border: 1px solid #E5E5E5;
				vertical-align: top;
				margin-right: 15px;
				button{
					width: 20%;
					height: 30px;
					border-radius: 5px;
					outline: none;
					cursor: pointer;
					margin-top: 45px;
					margin-left: 15px;
					background-color: #FF6600;
					color: #fff;
					&:last-child{
						margin-left: 145px;
					}
				}
				.username{
					font-size: 18px;
					margin: 15px;
					font-weight: 300;
				}
				.phoneNum{
					font-size: 16px;
					margin-left: 15px;
					font-weight: 400;
				}
				.address{
					font-size: 16px;
					margin-left: 15px;
					margin-top:5px;
					font-weight: 400;
				}
			}
			.addAddress{
				margin-top: 20px;
				display: inline-block;
				width: 300px;
				height: 200px;
				border: 1px solid #E5E5E5;
				margin-left: 25px;
				position: relative;
				cursor: pointer;
				div{
					position: absolute;
					display: inline-block;
					width: 100px;
					height: 100px;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin:auto;
					p{
						color: #999;
						font-size: 18px;
					}
				}
			}
			.goods{
				font-size: 22px;
				font-weight: 600;
				margin-top: 15px;
			}
			.goodsItem{
				display: flex;
				width: 100%;
				height: 50px;
				align-items: center;
				margin:25px 0 5px 0;
				border: 1px solid #E5E5E5;
				padding: 8px 0;

				img{
					height: 100%;
				}
				div{
					flex: 1;
					font-size: 16px;
					color: #333;
					text-align: center;
					&:last-child{
						color: #FF6600;
					}
				}
			}
			.send{
				margin-top: 55px;
				span{
					&:first-child{
						font-size: 22px;
						font-weight: 600;
						margin-right: 100px;
					}
					&:last-child{
						font-size: 18px;
						color: #ff6600;
					}
				}
				
			}
			.ticket{
				margin-top: 35px;
				span{
					&:nth-child(1){
						font-size: 22px;
						font-weight: 600;
						margin-right: 100px;
					}
					&:nth-child(2){
						font-size: 18px;
						color: #ff6600;
					}
					&:nth-child(3){
						font-size: 18px;
						color: #ff6600;
						margin-left: 25px;
					}
				}
				
			}
			.pay{
				height: 250px;
				display: flex;
				flex-direction: column;
				margin-top: 55px;
				div{
					flex: 1;
					font-size: 18px;
					color: #333;
				}
				span{
					color: #FF6600;
					
				}
				.last{
					font-size: 28px;
					font-weight: 600;
				}
				button{
					width: 200px;
					line-height: 39px;
					color: #fff;
						background-color: #999;
						margin-top: 35px;
					cursor: pointer;
					outline: none;
					&:last-child{
						margin-top: 15px;
						background-color: #FF6600;
					}
				}
			}
			
		}
		.edit-wrap{
			font-size: 14px;
			.item{
				margin-bottom: 15px;
				text-align: left;
				input{
					display: inline-block;
					width: 283px;
					height: 40px;
					line-height: 40px;
					padding-left: 15px;
					border: 1px solid #E5E5E5;
					&:nth-child(2){
						margin-left: 14px;
					}
				}
				select{
					height: 40px;
					line-height: 40px;
					border: 1px solid #E5E5E5;
					margin-right: 15px;
				}
				textarea{
					height: 62px;
					width: 100%;
					padding: 13px 15px;
					box-sizing: border-box;
					border: 1px solid #E5E5E5;
					resize: none;
				}
			}
		}
	}
	.changeColor{
		border: 1px solid #ff6600 !important;
	}
</style>
